<template>
    <div id="sponsor">
        <div class="title2" @click="back()">
            <i class="iconfont icon-fanhui"></i>
            申请账号
        </div>
        <div class="sponsorBox">
            <div class="item">
                <div class="name">账号设置<span>*</span></div>
                <div class="select">
                    <div class="selectList"  @click="item1(0)">
                        作者<span v-if="select1 == 0">●</span>
                    </div>
                    <div class="selectList" @click="item1(4)">
                        主办方<span v-if="select1 == 4">●</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="name">账号<span>*</span></div>
                <div class="text">
                    <input type="text" v-model="select2" placeholder="作为登录账号，字母或数字组合"/>
                </div>
                <div class="hint" v-if="hint1">账号已存在</div>
            </div>
            <div class="item">
                <div class="name">名称<span>*</span></div>
                <div class="text">
                    <input type="text" v-model="select3" placeholder="名称"/>
                </div>
                <div class="hint" v-if="hint2">名称已存在</div>
            </div>
            <div class="item">
                <div class="name">所属组织/单位正式全称<span>*</span></div>
                <div class="text">
                    <input type="text" v-model="select4" placeholder="所属组织/单位正式全称"/>
                </div>
            </div>
            <div class="item">
                <div class="name">组织/单位简介<span>*</span></div>
                <div class="text">
                    <textarea type="text" v-model="select5" placeholder="100字以内，申请成功后将在主页中展示"></textarea>
                </div>
            </div>
            <div class="item">
                <div class="name">Logo</div>
                <div class="image">
                    <img class="img" :src="headerImage" v-if="headerImage">
                    <div class="img" v-if="!headerImage">Logo</div>
                    <div class="btnPush">
                        <p>上传
                            <input type="file" id="change"  accept="image/*" @change="change">
                            <label for="change"></label>
                        </p>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="name">联系人姓名<span>*</span></div>
                <div class="text">
                    <input type="text" v-model="select6" placeholder="请输入联系人姓名"/>
                </div>
            </div>
            <div class="item">
                <div class="name">联系人邮箱<span>*</span></div>
                <div class="text">
                    <input type="text" v-model="select7" placeholder="请输入联系人邮箱"/>
                </div>
            </div>
            <div class="item">
                <div class="name">联系人手机号<span>*</span></div>
                <div class="text">
                    <phone v-on:listenToPhone="showMessFromChild"></phone>
                    <capt-sms v-on:listenToSmsCode="showMessFromChild"></capt-sms>
                </div>
                <!--<div class="text">-->
                    <!--<input type="text" v-model="select8" placeholder="请输入联系人手机号"/>-->
                <!--</div>-->
                <!--<div class="phone">-->
                    <!--<input type="text" v-model="select9" placeholder="请填写验证码"/>-->
                    <!--<span>获取验证码</span>-->
                <!--</div>-->
            </div>

            <div class="item">
                <div class="name">提交即表示同意
                    <router-link :to="{name:'profile',query:{type:'3'}}">
                        《运联服务协议》
                    </router-link>
                </div>
            </div>
            <div class="submit" @click="submit()">提交</div>
        </div>
        <!--展示上传头像截图区-->
        <div class="container" v-if="url">
            <vueCropper :imgUrl="url" @uploadUrl="uploadUrl"></vueCropper>
        </div>
    </div>
</template>

<script>
    import {commonService} from '../../service/commonService'
    import {userService} from '../../service/userService'
    import {loginService} from '../../service/loginService'
    import vueCropper from '../../component/common/vue-cropper.vue'
    import phone from '../../component/login/phoneIpt.vue'
    import captSms from '../../component/login/captSms.vue'
    export default {
        components: { 'vueCropper':vueCropper ,"phone": phone, 'capt-sms': captSms},
        data () {
            return {
                select1:0,
                select2:'',
                select3:'',
                select4:'',
                select5:'',
                select6:'',
                select7:'',
                select8:'',
                select9:'',
                hint1:false,
                hint2:false,
                headerImage:'',
                url:'',
                option:'',
                panel:false,
                msg: {type: 0 },
                agreeMe: '',
                phoneNo: '',
                kaptchaValue: '',
                smsValue: '',
                platform: 'WXH5',
                thirdInfo: '',
                isCheck: true
            }
        },
        mounted: function() {
            let that = this;

        },
        methods:{
            showMessFromChild (data) {
                let that = this;
                if(data.length > 0){
                    that.pop(data); // 弹框
                }
            },
            pop (mess) { //弹框的方法
                let that = this
                commonService.autoCloseModal(that, mess, 1);
            },
            isApplyAdmin:function(){
              let that = this;
                userService.getIsApplyAdmin({}).then(function(res){

                })
            },
            item1(num){
              let that = this;
              that.select1 = num;
            },
            uploadUrl (img) {
                let that = this
                that.url = ''
                that.headerImage = that.$store.state.picHead + img
            },
            //以下为上传头像方法
            getObjectURL (file) {
                let url = null ;
                if (window.createObjectURL!=undefined) { // basic
                    url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file) ;
                }
                return url ;
            },
            change (e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length) return;
                this.panel = true;
                this.picValue = files[0];

                this.url = this.getObjectURL(this.picValue);
                // console.log(this.url)
                //每次替换图片要重新得到新的url
//                this.option.img=this.url
//                this.panel = true;
            },
            pop (mess) { //弹框的方法
                let that = this
                commonService.autoCloseModal(that, mess, 1);
            },
            submit(){
                let that = this;
                var emil = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")
                that.select8 =that.$store.state.loginStore.phoneNo; //手机号
                that.select9 =that.$store.state.loginStore.messValidate; // 短信验证码
                if(that.select2 == ''){
                    commonService.autoCloseModal(that, '请填写账号', 1)
                    return
                }else if(that.select3 == ''){
                    commonService.autoCloseModal(that, '请填写名称', 1)
                    return
                }else if(that.select4 == ''){
                    commonService.autoCloseModal(that, '请填写所属组织/单位', 1)
                    return
                }else if(that.select5 == ''){
                    commonService.autoCloseModal(that, '请填写所组织/单位简介', 1)
                    return
                }else if(that.select6 == ''){
                    commonService.autoCloseModal(that, '请填写联系人姓名', 1)
                    return
                }else if(that.select7 == ''){
                    commonService.autoCloseModal(that, '请填写联系人邮箱', 1)
                    return
                }else if(!emil.test(that.select7)){
                    commonService.autoCloseModal(that, '请填写正确邮箱', 1)
                    return
                }else if(that.select8 == ''){
                    commonService.autoCloseModal(that, '请填写联系人手机号', 1)
                    return
                }else if(!(/^1[34578]\d{9}$/.test(that.select8))){
                    commonService.autoCloseModal(that, '请填写正确手机号', 1)
                    return
                }else if(that.select9 == ''){
                    commonService.autoCloseModal(that, '请填写验证码', 1)
                    return
                }
                // 赋值区域 end
                let mess = loginService.formValidate(1, 0, 1, 0, {phoneNo: that.select8, smsValue: that.select9, pwd: that.pwd});
                if(typeof mess != 'undefined') {
                    if(mess.trim('').length > 0){
                        that.pop(mess);
                        return false;
                    }
                }
                else{
                    userService.getNamecheck({name:that.select3}).then(function(res){
                        if(!res.data.datas){
                            that.hint2 = true;
                            commonService.autoCloseModal(that, '名称已存在', 1)
                            return false;
                        }
                    })
                    userService.getAccountcheck({account:that.select2}).then(function(res){
                        // console.log(res)
                        if(!res.data.datas){
                            that.hint1 = true;
                            commonService.autoCloseModal(that, '账号已存在', 1)
                            return false;
                        }
                    })
                    //短信验证码that.$store.state.loginStore.messValidate
                    userService.postApplyadmin({
                        type:that.select1,
                        adminName:that.select3,
                        adminCompany:that.select4,
                        describe:that.select5,
                        adminContactName:that.select6,
                        adminPhone:that.select8,
                        adminEmail:that.select7,
                        smsCode:that.select9,
                        adminLogo:that.headerImage
                    }).then(function(res){
                        if(res.data.success){
                            commonService.autoCloseModal(that, '提交成功', 1);
                        }else{
                            commonService.autoCloseModal(that, res.data.message, 1)
                        }
                    })
                }
            },
            back(){
                this.$router.push({name:'mycenter'})
            }
        },
    }
</script>

<style lang="less">
    @import url('../../assets/css/theme.less');
    #sponsor{
        min-height: 100%;
        background:#F9F9F9;
        .title2{
            width:100%;
            height: 1.1733rem;
            line-height: 1.1733rem;
            text-align: center;
            position:relative;
            font-size: 0.48rem;
            color: #333;
            letter-spacing: 0.3px;
            background: #fff;
            border-bottom: 1px solid rgba(221, 221, 221, 0.5);
            z-index:100;
            i{
                font-size: .5rem;
                color: #999;
                text-align: left;
                position: absolute;
                top: 0;
                left: 0.2667rem;
            }
        }
        .sponsorBox{
            width:100%;
            overflow: hidden;
            .item{
                width:100%;
                .font1{
                    font-size:16px;
                }
                .name{
                    width:100%;
                    height:1rem;
                    line-height:1.1rem;
                    background:#F9F9F9;
                    padding:0 0.4rem;
                    box-sizing: border-box;
                    font-size: 14px;
                    color: #666666;
                    span{
                        color:red;
                        margin-left:0.1rem;
                    }
                    a{
                        color: #20A0FF;
                        margin-left:0.23rem;
                    }
                }
                .text{
                    width:100%;
                    padding:0 0.4rem;
                    box-sizing: border-box;
                    background:#fff;
                    input{
                        width:100%;
                        height:1.47rem;
                        border:none;
                        outline: none;
                        font-size: 16px;
                        color:#333;
                    }
                    input::-webkit-input-placeholder{
                        color: #BBBBBB;
                    }
                    input[type=number]{
                        width:70%;
                    }
                    textarea{
                        width:100%;
                        height:3rem;
                        border:none;
                        outline: none;
                        padding:0.4rem 0;
                        box-sizing: border-box;
                        font-size: 16px;
                        color:#333;
                    }
                    textarea::-webkit-input-placeholder{
                        color: #BBBBBB;
                    }
                }
                .phone{
                    width:100%;
                    padding:0 0.4rem;
                    box-sizing: border-box;
                    background:#fff;
                    overflow: hidden;
                    input{
                        width:60%;
                        height:1.47rem;
                        border:none;
                        outline: none;
                        font-size: 16px;
                        color:#333;
                        float:left;
                    }
                    input::-webkit-input-placeholder{
                        color: #BBBBBB;
                    }
                    span{
                        width:40%;
                        float:left;
                        text-align: center;
                        height:1.47rem;
                        line-height:1.47rem;
                        font-size: 16px;
                        color: #20A0FF;
                    }
                }
                .select{
                    width:100%;
                    .selectList{
                        width:100%;
                        height:1.47rem;
                        line-height:1.47rem;
                        padding:0 0.4rem;
                        box-sizing: border-box;
                        background: #fff;
                        font-size: 15px;
                        color: #333;
                        span{
                            float:right;
                            font-size: 18px;
                            color: #999;
                        }
                    }
                }
                .hint{
                    width:100%;
                    font-size: 13px;
                    color: #FF3831;
                    height:0.8rem;
                    line-height:0.8rem;
                    padding:0 0.4rem;
                    box-sizing: border-box;
                }
                .image{
                    width:100%;
                    padding: 0 0.4rem;
                    box-sizing: border-box;
                    overflow: hidden;
                    .img{
                        width:3rem;
                        height:3rem;
                        border-radius: 100%;
                        line-height: 3rem;
                        text-align: center;
                        float:left;
                        background:#bbbbbb;
                    }
                    .btnPush{
                        width:2rem;
                        float:left;
                        margin-left:0.4rem;
                        p{
                            width:2rem;
                            height:0.8rem;
                            line-height:0.8rem;
                            text-align: center;
                            border:1px solid #bbb;
                            border-radius: 4px;
                            font-size:15px;
                            overflow: hidden;
                            position: relative;
                            input{
                                position: absolute;
                                top:0;
                                left:0;
                                opacity: 0;
                            }
                        }
                    }
                }
            }
            .submit{
                width:100%;
                height:1.2rem;
                line-height:1.2rem;
                text-align: center;
                font-size: 16px;
                color: #20A0FF;
                background:#fff;
                margin:0.6rem 0;
            }
        }
    }
    .container {
        z-index: 10000;
        position: fixed;
        padding-top: 60px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background:rgba(0,0,0,1);
        #button {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 80px;
            height: 40px;
            border: none;
            border-radius: 5px;
            background: white;
        }
    }

    .cropper-view-box,.cropper-face {
        border-radius: 50%;
    }
    .cropper-container {
        font-size: 0;
        line-height: 0;

        position: relative;

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

        direction: ltr;
        -ms-touch-action: none;
        touch-action: none
    }
    .cropper-container img {
        /* Avoid margin top issue (Occur only when margin-top <= -height) */
        display: block;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100%;
        height: 100%;
        image-orientation: 0deg
    }
    .cropper-wrap-box,
    .cropper-canvas,
    .cropper-drag-box,
    .cropper-crop-box,
    .cropper-modal {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .cropper-wrap-box {
        overflow: hidden;
    }
    .cropper-drag-box {
        opacity: 0;
        background-color: #fff;
    }
    .cropper-modal {
        opacity: .5;
        background-color: #000;
    }
    .cropper-view-box {
        display: block;
        overflow: hidden;

        width: 100%;
        height: 100%;

        outline: 1px solid #39f;
        outline-color: rgba(51, 153, 255, 0.75);
    }
    .cropper-dashed {
        position: absolute;

        display: block;

        opacity: .5;
        border: 0 dashed #eee
    }
    .cropper-dashed.dashed-h {
        top: 33.33333%;
        left: 0;
        width: 100%;
        height: 33.33333%;
        border-top-width: 1px;
        border-bottom-width: 1px
    }
    .cropper-dashed.dashed-v {
        top: 0;
        left: 33.33333%;
        width: 33.33333%;
        height: 100%;
        border-right-width: 1px;
        border-left-width: 1px
    }
    .cropper-center {
        position: absolute;
        top: 50%;
        left: 50%;

        display: block;

        width: 0;
        height: 0;

        opacity: .75
    }
    .cropper-center:before,
    .cropper-center:after {
        position: absolute;
        display: block;
        content: ' ';
        background-color: #eee
    }
    .cropper-center:before {
        top: 0;
        left: -3px;
        width: 7px;
        height: 1px
    }
    .cropper-center:after {
        top: -3px;
        left: 0;
        width: 1px;
        height: 7px
    }
    .cropper-face,
    .cropper-line,
    .cropper-point {
        position: absolute;

        display: block;

        width: 100%;
        height: 100%;

        opacity: .1;
    }
    .cropper-face {
        top: 0;
        left: 0;

        background-color: #fff;
    }
    .cropper-line {
        background-color: #39f
    }
    .cropper-line.line-e {
        top: 0;
        right: -3px;
        width: 5px;
        cursor: e-resize
    }
    .cropper-line.line-n {
        top: -3px;
        left: 0;
        height: 5px;
        cursor: n-resize
    }
    .cropper-line.line-w {
        top: 0;
        left: -3px;
        width: 5px;
        cursor: w-resize
    }
    .cropper-line.line-s {
        bottom: -3px;
        left: 0;
        height: 5px;
        cursor: s-resize
    }
    .cropper-point {
        width: 5px;
        height: 5px;

        opacity: .75;
        background-color: #39f
    }
    .cropper-point.point-e {
        top: 50%;
        right: -3px;
        margin-top: -3px;
        cursor: e-resize
    }
    .cropper-point.point-n {
        top: -3px;
        left: 50%;
        margin-left: -3px;
        cursor: n-resize
    }
    .cropper-point.point-w {
        top: 50%;
        left: -3px;
        margin-top: -3px;
        cursor: w-resize
    }
    .cropper-point.point-s {
        bottom: -3px;
        left: 50%;
        margin-left: -3px;
        cursor: s-resize
    }
    .cropper-point.point-ne {
        top: -3px;
        right: -3px;
        cursor: ne-resize
    }
    .cropper-point.point-nw {
        top: -3px;
        left: -3px;
        cursor: nw-resize
    }
    .cropper-point.point-sw {
        bottom: -3px;
        left: -3px;
        cursor: sw-resize
    }
    .cropper-point.point-se {
        right: -3px;
        bottom: -3px;
        width: 20px;
        height: 20px;
        cursor: se-resize;
        opacity: 1
    }
    @media (min-width: 768px) {

        .cropper-point.point-se {
            width: 15px;
            height: 15px
        }
    }
    @media (min-width: 992px) {

        .cropper-point.point-se {
            width: 10px;
            height: 10px
        }
    }
    @media (min-width: 1200px) {

        .cropper-point.point-se {
            width: 5px;
            height: 5px;
            opacity: .75
        }
    }
    .cropper-point.point-se:before {
        position: absolute;
        right: -50%;
        bottom: -50%;
        display: block;
        width: 200%;
        height: 200%;
        content: ' ';
        opacity: 0;
        background-color: #39f
    }
    .cropper-invisible {
        opacity: 0;
    }
    .cropper-bg {
        background-image: url('');
    }
    .cropper-hide {
        position: absolute;

        display: block;

        width: 0;
        height: 0;
    }
    .cropper-hidden {
        display: none !important;
    }
    .cropper-move {
        cursor: move;
    }
    .cropper-crop {
        cursor: crosshair;
    }
    .cropper-disabled .cropper-drag-box,
    .cropper-disabled .cropper-face,
    .cropper-disabled .cropper-line,
    .cropper-disabled .cropper-point {
        cursor: not-allowed;
    }
</style>